<template>
	<div class="content55 personal">
		<header class="header">
			<div @click="$router.go(-1)" class="left iconfont icon-left"></div>
			<div class="title">個人データ</div>
		</header>
	<!-- 名前 年齢 性別 メールアドレスを入力してください 現在の住所を入力してください 結婚状況 学歴 -->
	<div class="ditem">
	    <div class="pd">
	        <input type="text" class="input" placeholder="メールアドレスを入力してください" v-model="data.email" />
	    </div>
	</div>
	
	<!-- <div class="ditem">
	    <div class="pd">
	        <input type="text" class="input" placeholder="LINEを入力してください" v-model="data.line" />
	    </div>
	</div> -->
	<div class="ditem">
	    <div class="pd">
	        <input type="text" class="input" placeholder="あなたの名前を入力してください" v-model="data.name" />
	    </div>
	</div>
	<div class="ditem">
	    <div class="pd">
	        <input type="text" class="input" placeholder="あなたの年齢を入力してください" v-model="data.age" />
	    </div>
	</div>
	<div class="ditem">
	    <div class="pd">
	        <input type="text" class="input" placeholder="あなたの性別を入力してください" readonly @click="openPicker('gender')"
	            v-model="data.gender" />
	    </div>
	</div>
	<div class="ditem">
	    <div class="pd">
	        <input type="text" class="input" placeholder="あなたの現在の住所を入力してください" v-model="data.address" />
	    </div>
	</div>
	<div class="ditem">
	    <div class="pd">
	        <input type="text" class="input" placeholder="あなたの現在の結婚状況を入力してください" readonly @click="openPicker('marital')"
	            v-model="data.marital_status" />
	    </div>
	</div>
	<div class="ditem">
	    <div class="pd">
	        <input type="text" class="input" placeholder="あなたの現在の学歴を入力してください" readonly v-model="data.education_level"
	            @click="openPicker('education')" />
	    </div>
	</div>
	<div class="topup" @click="sub">設定</div>

		<Picker v-if="picker_loading" v-model:isShowPicker="isShowPicker" v-model:anchor="anchor" :data="picker_data"
			:options="options" @confirm="confirmSelection" confirmText="确认" cancelText="取消" />
	</div>
</template>

<script>
	import AJAX from '@/utils/http'
	import { ElMessageBox } from 'element-plus'
	import {
		Picker
	} from 'vue3-picker';

	export default {
		components: {
			Picker,
		},

		data() {
			return {
				picker_loading: false,
				isShowPicker: false,
				anchor: 0,
				options: {
					titleText: '',
					cancelColor: '#999',
					confirmColor: '#1766ff',
					cancelText:"オフ",
					confirmText:"かくにん",
				},
				picker_list:{},
				picker_data: [],
				user:{},
				pickerType: "",
				data: {},
				dataInfo:{},
				countDown:60, // 默认时间60秒
				countDownTimeout:null,  // 倒计时计数器
				resetBtndisab:false, //重发按钮初始值为不可用
			};
		},
		created() {
			this.fetchData();
			AJAX.post('/index/index', {}, {
				showLoading: false
			}).then(e => {
				this.dataInfo = e.data;
			});

		},
		mounted() {
			this.picker_loading = true;
		},
		methods: {
			sub(){
				if(this.data.name == '' || this.data.name == undefined){
					this.$toast('2 つのパスワードが矛盾しています');
					return;
				}
				else if(this.data.age == '' || this.data.age == undefined){
					this.$toast('あなたの年齢を入力してください');
					return;
				}
				else if(this.data.gender == '' || this.data.gender == undefined){
					this.$toast('あなたの性別を入力してください');
					return;
				}
				else if(this.data.address == '' || this.data.address == undefined){
					this.$toast('あなたの現在の住所を入力してください');
					return;
				}
				else if(this.data.marital_status == '' || this.data.marital_status == undefined){
					this.$toast('あなたの現在の結婚状況を入力してください');
					return;
				}
				else if(this.data.education_level == '' || this.data.education_level == undefined){
					this.$toast('あなたの現在の学歴を入力してください');
					return;
				}
				if(!this.data.email){
					this.$toast("メールボックスは必須です");
					return;
				}
				else{
					AJAX.post('/user/personal/save/true', this.data).then(e => {
						if (!e.code) {
							this.$toast(e.msg);
						
							if (!this.dataInfo.work) {
								// this.$toast("まだ勤務先情報を設定していません");
								setTimeout(() => {
									this.$router.push('/user/work');
								}, 1000 * 1.5);
																		
							}
							
							if (!this.dataInfo.bank) {
								// this.$toast("銀行カード情報をまだ設定していません");
								setTimeout(() => {
									this.$router.push('/user/bank');
								}, 1000 * 1.5);
																		
							}
							
							return;
						}
						// this.$alert(e.msg, 'Ok', () => {
						// 	// this.$router.replace('/');
								
						// });
						ElMessageBox.alert(e.msg, 'OK', {
							confirmButtonText: 'OK',
							callback: () => {
									
								     if (!this.dataInfo.work) {
								     	// this.$toast("まだ勤務先情報を設定していません");
								     	setTimeout(() => {
								     		this.$router.push('/user/work');
								     	}, 1000 * 1.5);
								     	return;
								     }
								     
								     if (!this.dataInfo.bank) {
								     	// this.$toast("銀行カード情報をまだ設定していません");
								     	setTimeout(() => {
								     		this.$router.push('/user/bank');
								     	}, 1000 * 1.5);
								     	return;
								     }
									 if(this.dataInfo.work&&this.dataInfo.bank){
										 window.location.href='/#/user/index'
									 }
							},
						})

					
					});
				}
			},
			sendEmail(){
				if(!this.data.email){
					this.$toast("メールボックスは必須です");
					return;
				}
				this.countDown = 60
				this.resetBtndisab = true;
				AJAX.post('/Ems/send', {email:this.data.email}, {
					showLoading: false
				}).then(e => {
					if (!e.code) {
						this.$toast(e.msg);
						return;
					}else{
						this.$toast("認証コードの送信に成功しました");
					}
				});
				this.doCountDown();
			},
			
			// 倒计时开始
			doCountDown(){
				this.countDownTimeout=setTimeout(()=>{
					this.countDown--;
					if(this.countDown<=0){
							 this.resetBtndisab = false;
							 clearTimeout(this.countDownTimeout);
					}else{
						this.doCountDown(this.countDown)
					}
				},1000)
			},
			fetchData() {
				AJAX.post('/user/personal', {}).then(e => {
					if (e.data.list) {
						this.data = e.data.list;
					}
					if(e.data.user){
						this.user = e.data.user
					}
					this.picker_list = e.data.picker_list;
				});
			},
			openPicker(type) {
				this.pickerType = type;
				this.picker_data = this.picker_list[type];
				this.isShowPicker = true;
			},
			confirmSelection(value) {
				if (this.isShowPicker && value) {

					switch (this.pickerType) {
						case 'gender':
							this.data.gender = value;
							break;
						case 'marital':
							this.data.marital_status = value;
							break;
						case 'education':
							this.data.education_level = value;
							break;
					}

					this.isShowPicker = false;
				}
			},
			cancelSelection() {
				this.isShowPicker = false;
			},
		}
	};
</script>

<style scoped>
	.personal {
		padding-left: 16px;
		padding-right: 16px;
	}

	.ditem {
		margin-top: 12px;
	}
</style>
